<template>
  <div class="homeView">
    <el-container>
      <el-header>
        <div class="logo" @click="goHome">
          <img src="@/assets/images/logo2.png" alt="" />
          <div class="text">
            接口文档*MOCK*自动化测试
          </div>
        </div>
        <!-- <div class="unLogin">
          <el-popconfirm title="确定要退出吗？" @confirm="outLogin">
            <el-button type="danger" slot="reference">退出登录</el-button>
          </el-popconfirm>
        </div> -->
      </el-header>
      <el-container>
        <el-aside :width="isCollpace ? '64px': '150px'">

            <el-tooltip class="item" effect="dark" content="折叠菜单" placement="right">
            <div class="menshow" @click="clickFont">
                <i class="el-icon-caret-left" v-show="!isCollpace"></i>
                <i class="el-icon-caret-right" v-show="isCollpace"></i>
            </div>
            </el-tooltip>


          <el-menu
            background-color="#304156"
            text-color="rgba(255,255,255, .6)" 
            active-text-color="#fff" 
            :collapse="isCollpace" 
            :collapse-transition="collapseFush" 
            router     
          >
            <el-menu-item index="envmanage">
              <i class="el-icon-coin"></i>
              <span slot="title">环境配置</span>
            </el-menu-item>

            <el-menu-item index="apimanage">
              <i class="el-icon-bangzhu"></i>
              <span slot="title">接口管理</span>
            </el-menu-item>

            <el-menu-item index="casemanage">
              <i class="el-icon-data-analysis"></i>
              <span slot="title">用例管理</span>
            </el-menu-item>
            
            <el-menu-item index="planmanage">
              <i class="el-icon-s-order"></i>
              <span slot="title">计划管理</span>
            </el-menu-item>

            <el-menu-item index="exerecord">
              <i class="el-icon-notebook-1"></i>
              <span slot="title">执行记录</span>
            </el-menu-item>

          </el-menu>
        </el-aside>
        <el-main>
           <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>

export default {
    data(){
        return{
            isCollpace:true,
            collapseFush:false
        }
    },

  methods: {
      //折叠按钮
      clickFont(){
          this.isCollpace = !this.isCollpace
      },

      //进入首页
      goHome(){
          this.$router.push('/welcome')
      },



     //退出登录 
    outLogin() {
      window.sessionStorage.removeItem("token");
      this.$message.success("退出成功");
      this.$router.push("/");
    }
  }
};
</script>

<style lang="less" scoped>
.homeView {
  height: 100%;
}
.el-header {
  background-color: #17253f;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .logo {
    display: flex;
    align-items: center;
    height: 100%;
    img {
      display: block;
      height: 70%;
    }
    .text {
      font-size: 26px;
      color: rgba(255, 255, 255, 0.6);
      padding-left: 20px;
    }
  }
}
.el-aside {
  background-color: #304156;
  position: relative;
  .el-menu{
      border-right: none;
  }
  .menshow{
      background-color: #304156;
      color:rgba(255, 255, 255, .6);
      width: 30px;
      height: 60px;
      font-size: 26px;
      line-height: 60px;
      text-align: center;
      align-items: center;
      position: absolute;
      right: 0;
      top:calc(50% - 30px)  //居中是顶部居中，如果是需要对象居中，需要减去本身高度的一半,左右居中也一样

  }
}
.el-container {
  background-color: #f8f8f8;
  height: 100%;
}
</style>